<template>
  <div class="sku">
    <el-form label-width="100px">
      <el-form-item label="SPU名称">{{spuRow.spuName}}</el-form-item>
      <el-form-item label="SKU名称"><el-input placeholder="SKU名称" v-model="skuInfo.skuName"></el-input></el-form-item>
      <el-form-item label="价格(元)"><el-input placeholder="价格(元)" type="number" v-model="skuInfo.price"></el-input></el-form-item>
      <el-form-item label="重量(千克)"><el-input placeholder="重量(千克)" v-model="skuInfo.weight"></el-input></el-form-item>
      <el-form-item label="规格描述"><el-input placeholder="规格描述" type="textarea" :rows="4" v-model="skuInfo.skuDesc"></el-input></el-form-item>
      <el-form-item label="平台属性">
        <el-form :inline="true" label-width="120px">
          <el-form-item :label="item.attrName" v-for="item in attrInfoList" :key="item.id">
            <el-select placeholder="请选择" v-model="item.idAndAttrId">
              <el-option v-for="item2 in item.attrValueList" :key="item2.id" :label="item2.valueName" :value="`${item2.id}:${item.id}`"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-form :inline="true" label-width="120px">
          <el-form-item :label="item.saleAttrName" v-for="item in spuSaleAttrList" :key="item.id">
            <el-select placeholder="请选择" v-model="item.idAndSaleId">
              <el-option v-for="item2 in item.spuSaleAttrValueList" :key="item2.id" :label="item2.saleAttrValueName" :value="`${item2.id}:${item.id}`"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="图片列表">
        <el-table border :data="spuImageList" @selection-change="handleSeclectChange">
          <el-table-column type="selection" width="60" align="center"></el-table-column>
          <el-table-column label="图片">
            <template v-slot="{row}">
              <img :src="row.imgUrl" style="width:100px;heigh:100px;">
            </template>
          </el-table-column>
          <el-table-column label="名称" prop="imgName"></el-table-column>
          <el-table-column label="操作">
            <template v-slot="{row}">
              <el-button type="primary" v-if="row.isDefault === 0" @click="handleSetDefault(row)">设置默认</el-button>
              <el-button  v-else>默认</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSave">保存</el-button>
        <el-button @click="$emit('changeScene')">取消</el-button>
      </el-form-item>
    </el-form>
  </div> 
</template>

<script>
import {
  getSpuImageList,
  getSpuSaleAttrList,
  getAttrInfoList,
  saveSkuInfo
} from '@/api/product/sku'
export default {
  name: 'SkuForm',
  props: {
    spuRow: {
      type: Object,
      default: () => ({})
    },
    initObj: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // 图片列表
      spuImageList: [],
      // 销售属性
      spuSaleAttrList: [],
      // 平台属性
      attrInfoList: [],
      imgList:[],
      skuInfo: {
        // 父组件给的
        category3Id: 0,
        spuId: 0,
        tmId: 0,
        // 数据双向绑定
        skuName: '',
        price: '',
        weight: '',
        skuDesc: '',
        // 自己书写代码
        skuDefaultImg: '',
        // 图片 
        skuImageList: [
          // {
          //   imgName: 'string',
          //   imgUrl: 'string',
          //   isDefault: 'string',
          //   spuImgId: 0
          // }
        ],
        // 平台属性 
        skuAttrValueList: [
          // {
          //   attrId: 0,
          //   valueId: 0,
          // }
        ], 
        // 销售属性
        skuSaleAttrValueList: [
          // {
          //   saleAttrId: 0,
          //   saleAttrValueId: 0,
          // }
        ]
      }
    }
  },
  created() {
    this.getData(this.spuRow, this.initObj)
  },
  methods: {
    async getData(row, obj) {
      // 收集父组件给予的数据
      this.skuInfo.category3Id = row.category3Id
      this.skuInfo.spuId = row.id
      this.skuInfo.tmId = row.tmId
      // 发请求
      const resSpuImageList = await getSpuImageList(row.id)
      const _res = resSpuImageList
      _res.forEach(item => {
        item.isDefault = 0
      })
      this.spuImageList = _res
      const resSpuSaleAttrList = await getSpuSaleAttrList(row.id)
      this.spuSaleAttrList = resSpuSaleAttrList
      const resAttrInfoList = await getAttrInfoList(obj)
      this.attrInfoList = resAttrInfoList
    },
    // table表格复选框按钮的事件
    handleSeclectChange(selection){
      console.log('selection:', selection)
      this.imgList = selection
    },
    // 图片列表的设置默认按钮
    handleSetDefault(row){
      this.spuImageList.forEach(item=>{
        item.isDefault = 0
      })
      row.isDefault = 1
      // 收集图片地址
      this.skuInfo.skuDefaultImg = row.imgUrl
    },
    // 保存按钮
    async handleSave(){
      // 1.整理参数skuInfo.skuAttrValueList
      const _arr = []
      this.attrInfoList.forEach(item=>{
        if (item.idAndAttrId) {
          _arr.push({
            attrId: item.idAndAttrId.split(':')[1],
            valueId: item.idAndAttrId.split(':')[0]
          })
        }
      })
      this.skuInfo.skuAttrValueList = _arr

      // 2.整理参数skuInfo.skuSaleAttrValueList
      const _arr1 = this.spuSaleAttrList.reduce((acc,item)=>{
        if (item.idAndSaleId) {
          acc.push({
            saleAttrId: item.idAndSaleId.split(':')[1],
            saleAttrValueId: item.idAndSaleId.split(':')[0]
          })
        }
        return acc
      },[])
      this.skuInfo.skuSaleAttrValueList = _arr1

      // 3.整理参数skuInfo.skuSaleAttrValueList.skuImageList
      this.skuInfo.skuSaleAttrValueList.skuImageList = this.imgList.map(item=>{
        return {
          imgName: item.imgName,
          imgUrl: item.imgUrl,
          isDefault: item.isDefault,
          spuImgId: item.id
        }
      })
      await saveSkuInfo(this.skuInfo)
      this.$message.success('添加sku成功')
      this.$emit('changeScene')
    }
  }
}
</script>

<style></style>
